<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/iscroll-probe.js"></script>
		<style>
		  *{padding: 0;margin: 0;}
		  .wrapper{
		    height: 500px;
		    border: 1px solid #ccc; 
		    overflow: hidden;
		    width: 300px;
		    position: relative;
		  }
		  .wrapper p{
		    background: #fff;
		    position:relative;
		    z-index: 1;
		  }
		  .reflash{
		    position: absolute;
		    top: 0;
		    width: 100%;
		    text-align: center;
		  }
		  .more{
		     position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
		  }
		</style>
	</head>
	<body>
	  <div class="wrapper">
        <p class="js_p">
          能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 Cascading Style Sheets（CSS，层叠样式表），这里主要讲Javascript。那么Javascript是什么东西？Javascript就是适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地使用于Internet网页制作上。 Javascript是由 Netscape公司开发的一种脚本语言（scripting language），或者称为描述语言。在HTML基础上，使用Javascript可以开发交互式Web网页。Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。 运行用Javascript编写的程序需要能支持Javascript语言的浏览器。Netscape公司 Navigator 3．0以上版本的浏览器都能支持 Javascript程序，微软公司Internet Explorer 3．0以上版本的浏览器基本上支持Javascript。微软公司还有自己开发的Javascript，称为JScript。 Javascript和Jscript基本上是相同的，只是在一些细节上有出入。 Javascript短小精悍， 又是在客户机上执行的，大大提高了网页的浏览速度和交互能力。 同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。
        </p>
        <div class="reflash">上拉刷新</div>
        <div class="more">加载更多</div>
    </div>
    <script>
      var scroll = new IScroll('.wrapper',{
         scrollbars: true,
         probeType:  3,
         disableTouch:false,
      });
      
      scroll.on('scroll', function (){
        if(scroll.y>=50){
          document.querySelector(".reflash").innerHTML="松手刷新"
        }else{
          document.querySelector(".reflash").innerHTML="上拉刷新"
        }
        let scorllTop = -scroll.y;
        let wheight = document.querySelector(".wrapper").offsetHeight;
        let pheight = document.querySelector(".js_p").offsetHeight;
        console.log(scorllTop,wheight,pheight)
        if((scorllTop+wheight)-pheight>=50){
          document.querySelector(".more").innerHTML="松手加载"
        }else{
          document.querySelector(".more").innerHTML="加载更多"
        }
      });
      scroll.on("scrollEnd",()=>{
        
      })
    </script>
	</body>
</html>
